﻿body { }
* { padding: 0; margin: 0; font-size: 14px; }
.page-wrap { padding: 20px; }
.row { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -moz-flex; display: -ms-flexbox; display: flex; padding: 5px; }
.row-wrap { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.row-no-padding, .row-no-padding > .col { padding: 0; }
.row + .row { margin-top: -5px; padding-top: 0; }
.col { display: block; -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; }
.row-top { -webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; -moz-align-items: flex-start; align-items: flex-start; }
.row-bottom { -webkit-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; -moz-align-items: flex-end; align-items: flex-end; }
.row-center { -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; }
.row-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; -webkit-align-items: stretch; -moz-align-items: stretch; align-items: stretch; }
.row-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; -webkit-align-items: baseline; -moz-align-items: baseline; align-items: baseline; }
.col-top { -webkit-align-self: flex-start; -moz-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; }
.col-bottom { -webkit-align-self: flex-end; -moz-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; }
.col-center { -webkit-align-self: center; -moz-align-self: center; -ms-flex-item-align: center; align-self: center; }
.col-10, .col-20 { -webkit-box-flex: 0; }
.col-offset-10 { margin-left: 10%; }
.col-offset-20 { margin-left: 20%; }
.col-offset-25 { margin-left: 25%; }
.col-offset-33, .col-offset-34 { margin-left: 33.3333%; }
.col-offset-50 { margin-left: 50%; }
.col-offset-66, .col-offset-67 { margin-left: 66.6666%; }
.col-offset-75 { margin-left: 75%; }
.col-offset-80 { margin-left: 80%; }
.col-offset-90 { margin-left: 90%; }
.col-10 { max-width: 10%; -webkit-flex: 0 0 10%; -moz-box-flex: 0; -moz-flex: 0 0 10%; -ms-flex: 0 0 10%; flex: 0 0 10%; }
.col-20 { max-width: 20%; -webkit-flex: 0 0 20%; -moz-box-flex: 0; -moz-flex: 0 0 20%; -ms-flex: 0 0 20%; flex: 0 0 20%; }
.col-25 { max-width: 25%; -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -moz-box-flex: 0; -moz-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; }
.col-33, .col-34 { max-width: 33.3333%; -webkit-box-flex: 0; -webkit-flex: 0 0 33.3333%; -moz-box-flex: 0; -moz-flex: 0 0 33.3333%; -ms-flex: 0 0 33.3333%; flex: 0 0 33.3333%; }
.col-50 { max-width: 50%; -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -moz-box-flex: 0; -moz-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; }
.col-66, .col-67 { max-width: 66.6666%; -webkit-box-flex: 0; -webkit-flex: 0 0 66.6666%; -moz-box-flex: 0; -moz-flex: 0 0 66.6666%; -ms-flex: 0 0 66.6666%; flex: 0 0 66.6666%; }
.col-75, .col-80 { -webkit-box-flex: 0; }
.col-75 { max-width: 75%; -webkit-flex: 0 0 75%; -moz-box-flex: 0; -moz-flex: 0 0 75%; -ms-flex: 0 0 75%; flex: 0 0 75%; }
.col-80 { max-width: 80%; -webkit-flex: 0 0 80%; -moz-box-flex: 0; -moz-flex: 0 0 80%; -ms-flex: 0 0 80%; flex: 0 0 80%; }
.col-90 { max-width: 90%; -webkit-box-flex: 0; -webkit-flex: 0 0 90%; -moz-box-flex: 0; -moz-flex: 0 0 90%; -ms-flex: 0 0 90%; flex: 0 0 90%; }


.memo-data-wrap { }
.memo-data-wrap .col { background: #3B5998; height: 100px; line-height: 20px; text-align: center; color: #fff; font-size: 20px; margin-right: 10px; }
.memo-data-wrap .col h2 { line-height: 30px; margin-top: 20px; }
.memo-data-wrap .col p { font-size: 12px; color: #ddd; }
.memo-data-wrap .col:last-child { margin-right: 0; }
.memo-data-wrap .col:nth-child(2) { background: #F96131; }
.memo-data-wrap .col:nth-child(3) { background: #55ACEE; }
.memo-data-wrap .col:nth-child(4) { background: #00A78E; }
.memo-data-wrap .col:nth-child(5) { background: red; }

#canvas { margin: auto; display: block; background: #fff; margin-top: 0.4rem; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }
